import Vue from 'vue'
import Vuex from 'vuex'
import { getUserInfoAPI, getUserProfileAPI } from "../api/userAPI.js"
Vue.use(Vuex)

// 1.定义初始化state对象命名为initState
const initState = {
  tokenInfo: {
    token: "",
    refresh_token: ""
  },
  // 用户基本信息
  userInfo: {},
  // 用户的简介信息
  userProfile: {}
}
//  2.直接从localstorage中获取 tokenInfo
const stateStr = window.localStorage.getItem("state")
// console.log(stateStr)
// 把获取到的值赋值给第一步定义的initstate
if (stateStr !== null) {
  // 加载本地数据
  initState.tokenInfo = JSON.parse(stateStr).tokenInfo
}
export default new Vuex.Store({
  state: {
    // 用来储存token信息的对象
    tokenInfo: initState.tokenInfo,
    // 用来储存userInfo信息的对象
    userInfo: initState.userInfo,
    // 用来储存userInfo信息的对象
    userProfile: initState.userProfile
  },
  mutations: {
    // 更新tokenInfo数据方法
    updateTokenInfo(state, payload) {
      //把提交过来的对象payload作为tokenInfo的值
      state.tokenInfo = payload
      this.commit("saveStateToStorage")
      // 是否有数据
      // console.log(state)
    },
    // 获取的token信息，储存到localStorage中
    saveStateToStorage(state) {
      window.localStorage.setItem('state', JSON.stringify(state))
    },
    cleanTokenInfo(state) {
      state.tokenInfo = {
        token: '',
        refresh_token: ''
      }
      localStorage.removeItem("state")
    },
    // 更新userinfo的方法
    updateUserInfo(state, payload) {
      // 1.把用户信息转存到state中
      state.userInfo = payload
      // 2.将最新的state对象持久化储存到本地
      this.commit("saveStateToStorage")
      // console.log(state);
    },
    // 清空vuex和本地数据
    cleanState(state) {
      // 1.清空vuex中数据
      state.tokenInfo = {}
      state.userInfo = {}
      state.userProfile = {}
      // 2.清空后的state储存到本地数据
      this.commit("saveStateToStorage")
    },
    // 更新userProfile
    updateUserProfile(state, payload) {
      state.userProfile = payload
      this.commit('saveStateToStorage')
    },
  },
  actions: {
    // 初始化用户的基本信息
    async initUserInfo(ctx) {
      // 调用API接口
      const { data: res } = await getUserInfoAPI();
      if (res.message === "OK") {
        ctx.commit("updateUserInfo", res.data)
        // console.log(this.state);S
      }
    },
    // 初始化用户的简介信息
    async initUserProfile(ctx) {
      // 调用API接口
      const { data: res } = await getUserProfileAPI()
      if (res.message === "OK") {
        ctx.commit('updateUserProfile', res.data)
      }
    }
  },
  getters: {
    // 用户头像计算属性
    userAvatar(state) {
      // 默认的头像地址
      let imgSrc = 'https://img.yzcdn.cn/vant/cat.jpeg'
      // 如果用户信息对相爱那个包含photo属性的值,则为imgSrc重新赋值
      if (state.userInfo.photo) {
        imgSrc = state.userInfo.photo
      }
      return imgSrc
    }
  }
})
